<template>
  <div id="app" class="container">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>在线翻译</h1>
    <h6 class="text-muted">简单 / 易用 / 便捷</h6>
    <TranslateForm @submit="submit"/>
    <TranslateResult v-text="result"/>
  </div>
</template>

<script>
import TranslateForm from './components/TranslateForm.vue'
import TranslateResult from './components/TranslateResult.vue'
import MD5 from 'md5'

export default {
  name: 'app',
  data () {
    return {
      result: ''
    }
  },
  components: {
    TranslateForm, TranslateResult
  },
  methods: {
    submit (text, langfrom, langto) {
      var appid = '20190315000277419'
      var key = 'AfJvKVmgyFuCtEIcA_Co'
      var salt = new Date().getTime()
      var str1 = appid + text + salt + key
      var sign = MD5(str1)
      this.axios.get('api/trans/vip/translate?q=' + text + '&from=' + langfrom + '&to=' + langto + '&appid=' + appid + '&salt=' + salt + '&sign=' + sign).then(response => {
        var data = response.data
        if (data['error_code']) {
          console.error(data['error_msg'])
        } else {
          this.result = data['trans_result'][0].dst
        }
      }).catch(error => {
        console.error(error.message)
      })
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 30px;
}
</style>
